<template>
  <div>
    <a-card :bordered="false">
      <f-table ref="topicProduct" size="default" rowKey="marketingId" :columns="columns" handler="shopMarketingListHandler" :operator="operator" :params="queryParam" :api="api.marketing" @onExpand="onExpand">
        <span slot="productTitle" slot-scope="text, record, index">
           <ellipsis :length="100" tooltip>
          {{record.productTitle}}
          </ellipsis>
        </span>

        <span slot="productImage" slot-scope="text, record, index">
          <img v-lazy="record.productImage" v-viewer class="radius-img">
        </span>
        <span slot="status" slot-scope="text, record, index">
            <a-tag color="pink" v-if="text==1">已上架</a-tag>
            <a-tag color="#108ee9" v-if="text==2">已下架</a-tag>
            <a-tag color="#87d068" v-if="text==3">违规下架</a-tag>
        </span>
        <span slot="recommend" slot-scope="text, record, index">
          <a-switch v-model="record.recommend==1" checkedChildren="是" unCheckedChildren="否" @change="(checked) => setRecommend(checked,record)"/>
        </span>

        <span slot="marketingPrice" slot-scope="text, record, index">
         <a-input-number :min="1" :step="0.1" v-model="record.marketingPrice" @change="(value)=>setMarketingPrice(value,record)" :maxLength="25" style="width: 120px"/>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
             <a href="javascript:;" @click="$refs.topicProduct.remove(record.marketingId)">删除</a>
          </template>
        </span>

        <span slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <div class="single-item" v-for="sku in skuList">
            <div class="hold-img"><img v-lazy="getImages(sku)" alt="" width="80" height="80" class="radius-img"></div>
              <p class="spec-title">{{sku.title}}</p>
              <div class="row-term">
                  <p><span class="row-title">价格：</span><span class="price-value">￥{{sku.price}}</span></p>
                  <p><span class="row-title">库存：</span><span class="stock-value">{{sku.num}}</span></p>
              </div>
          </div>
        </span>
      </f-table>
    </a-card>

    <f-drawer ref="productSelectDrawer" width="50%" @visibleChange="visibleChange" @submit="handleSubmit">
      <product-select ref="productSelect" v-if="drawerVisible" :topicId="topicId"></product-select>
    </f-drawer>

  </div>
</template>

<script>


  import ProductSelect from './product_select'
  import Ellipsis from '../../../../../components/Ellipsis/Ellipsis'

  export default {
    name: 'TopicProduct',
    components: { Ellipsis, ProductSelect },
    props: {
      topicId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        //列表初始化查询参数
        queryParam: {
          topicId: this.topicId
        },
        topic: {},
        firstCategory: [],
        drawerVisible: false,
        onLineState: [{ value: '2', label: '已下架' }, { value: '3', label: '违规下架' }],
        skuList: [],
        // 表头
        columns: [
          {
            title: '封面图',
            align: 'center',
            dataIndex: 'productImage',
            scopedSlots: { customRender: 'productImage' }
          },
          {
            title: '商品名称',
            width: '560px',
            dataIndex: 'productTitle',
            scopedSlots: { customRender: 'productTitle' }
          },
          {
            title: '商品价格',
            align: 'center',
            dataIndex: 'productPrice'
          },
          {
            title: '活动价格',
            align: 'center',
            dataIndex: 'marketingPrice',
            scopedSlots: { customRender: 'marketingPrice' }
          },
          {
            title: '已售数量',
            align: 'center',
            dataIndex: 'soldNum'
          },
          {
            title: '限购数量',
            align: 'center',
            dataIndex: 'limitNum'
          },

          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        //操作按钮
        operator: [
          {
            name: '选择活动商品',
            icon: 'plus',
            that: this,
            handler: function(table, that) {
              that.$refs.productSelectDrawer.show()
            }
          },
          {
            name: '删除',
            icon: 'delete',
            batch: true,
            handler: function(table) {
              table.remove()
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      handleSubmit(callback) {
        let selectIds = this.$refs.productSelect.getSelectedRowKey()
        if (!selectIds || selectIds.length == 0) {
          this.$message.error('请选择商品')
          return
        }
        this.http.post(this, {
          url: this.api.marketing.batchAdd,
          data: {
            topicId: this.topicId,
            productIds: selectIds.join(',')
          },
          success: function(me) {
            me.$refs.topicProduct.refresh(true)
            callback();
          }
        })
      },
      setMarketingPrice(value, record) {
        this.http.post(this, {
          url: this.api.marketing.update,
          data: {
            marketingId: record.marketingId,
            marketingPrice: value
          },
          success: function(me, data) {

            record.marketingPrice = data.marketingPrice
          }
        })
      },
      getText: function(value) {
        if (value == 1) {
          return '已上架'
        }
        if (value == 2) {
          return '已下架'
        }
        if (value == 3) {
          return '违规下架'
        }
      },
      getImages(sku) {
        let images = sku.images
        if (images != '' && images.indexOf('[{') > -1) {
          let obj = JSON.parse(images)
          if (obj && obj.length > 0) {
            return obj[0].url
          }
        }
        return images
      },
      onExpand(expanded, record) {
        if (expanded) {
          this.skuList = []
          this.http.get(this, {
            url: this.api.product.getSkuList,
            data: {
              params: {
                productId: record.productId
              }
            },
            success: function(me, data) {
              me.skuList = data
            }
          })
        }
      }
    },
    created() {

    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">

  .single-item {
    text-align: center;
    float: left;
    margin-right: 8px;
    border: 1px solid #E1E6F0;
    width: 180px;
    height: 180px;
    padding: 10px;
    cursor: pointer;
  }

  .single-item .hold-img {
    padding: 5px;
  }


  .single-item p {
    margin: 0px;
    width: 140px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-item .spec-title {
    margin-top: 5px;

    color: #00A0E9;
  }

  .single-item .row-term p {
    width: 160px;
    text-align: left;
  }

  .row-title {
    display: inline-block;
    text-align: center;
    padding-left: 20px;
  }

</style>
